<template>
    <view class="liveDetail">
        <header>
            <video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
                    @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
        </header>
        <div class="main">
            <div>
                <input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
            </div>
            <view class="uni-btn-v">
                <button @click="sendDanmu" class="page-body-button">发送弹幕</button>
            </view>
        </div>
    </view>
</template>
<script>
export default {
    data() {
        return {
            src: '',
            danmuList: [{
                    text: '第 1s 出现的弹幕',
                    color: '#ff0000',
                    time: 1
                },
                {
                    text: '第 3s 出现的弹幕',
                    color: '#ff00ff',
                    time: 3
                }
            ],
            danmuValue: ''
        }
    },
    onReady: function(res) {
        // #ifndef MP-ALIPAY
        this.videoContext = uni.createVideoContext('myVideo')
        // #endif
    },
    methods: {
        sendDanmu: function() {
            this.videoContext.sendDanmu({
                text: this.danmuValue,
                color: this.getRandomColor()
            });
            this.danmuValue = '';
        },
        videoErrorCallback: function(e) {
            uni.showModal({
                content: e.target.errMsg,
                showCancel: false
            })
        },
        getRandomColor: function() {
            const rgb = []
            for (let i = 0; i < 3; ++i) {
                let color = Math.floor(Math.random() * 256).toString(16)
                color = color.length == 1 ? '0' + color : color
                rgb.push(color)
            }
            return '#' + rgb.join('')
        }
    }
}
</script>
<style lang="scss" scoped>
.liveDetail{
    width: 100%;
    height: 100%;
    header{
        width: 100%;
        #myVideo{
            width: 100%;
        }
    }
    .main{
        width: 100%;
        box-sizing: border-box;
        padding: 0 20rpx;
        >div{
            width: 100%;
           p{
               width: 100%;
               height: 60rpx;
           }
           input{
               width: 100%;
           }
        }
        .uni-btn-v{
            width: 100%;
            margin-top: 40rpx;
            text-align: center;
        }
    }
}
</style>